<template>
  <div class="ColorfulPage">
    <div class="HomeTopBox">
  <h4 class="homeTitle">多彩青城</h4>
</div>
  <div class="mainBox">
    <div class="imgBox">
      <template v-for="(item, index) in imgList">
        <div class="itemBox" :key="index"
             @click="jumpPage(item)"
             :style="{background: 'url('+item.imgUrl+')',backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat'}">
          <div class="contentBox">
            <img :src="item.iconUrl" class="icon"/>
            <div class="name">{{ item.name }}</div>
            <div class="englishName">{{ item.englishName }}</div>
            <img src="@/assets/colorful/arrow.png"/>
          </div>
        </div>
      </template>
    </div>
  </div>
  </div>
</template>

<script>
import axios from '../../axios'
export default {
  name: 'ColorfulPage',
  data () {
    return {
      imgList: [{
        pathUrl: '',
        imgUrl: require('../../assets/colorful/c1.png'),
        iconUrl: require('../../assets/colorful/i1.png'),
        name: '度假活动',
        englishName: 'Holiday'
      }, {
        pathUrl: '',
        imgUrl: require('../../assets/colorful/c2.png'),
        iconUrl: require('../../assets/colorful/i2.png'),
        name: '美食盛会',
        englishName: 'Gourmet Festival'
      }, {
        pathUrl: '',
        imgUrl: require('../../assets/colorful/c3.png'),
        iconUrl: require('../../assets/colorful/i3.png'),
        name: '地方民宿',
        englishName: 'Local lodging'
      }, {
        pathUrl: '',
        imgUrl: require('../../assets/colorful/c4.png'),
        iconUrl: require('../../assets/colorful/i4.png'),
        name: '度假酒店',
        englishName: 'Resort Hote'
      }, {
        pathUrl: '',
        imgUrl: require('../../assets/colorful/c5.png'),
        iconUrl: require('../../assets/colorful/i5.png'),
        name: '交通攻略',
        englishName: 'Traffic strategy'
      }, {
        pathUrl: '',
        imgUrl: require('../../assets/colorful/c6.png'),
        iconUrl: require('../../assets/colorful/i6.png'),
        name: '民俗风情',
        englishName: 'Folk customs '
      }],
      dataList: []
    }
  },
  methods: {
    jumpPage (obj) {
      this.$router.push({
        path: obj.pathUrl
      })
    },
    getData () {
      axios.get('/preview/cityScenery/getCityScenerysForApp').then((res) => {
        this.dataList = res.data.map.list
        console.log(res.data.map.list)
      })
        .catch(function (err) {
          console.log(err)
        })
    }
  },
  mounted () {
    this.getData()
  }
}
</script>

<style scoped lang="scss">
  .ColorfulPage{
    width: 100%;
    height: auto;
    min-height: calc(100vh);
    background: #fff;
    padding-bottom: 1px;
    .clear {
      clear: both;
    }
    .HomeTopBox{
      width: 750px;
      height: 253px;
      padding-top: 125px;
      background: url("../../assets/colorful/topBg.png") no-repeat;
      background-size: 100% 100%;
      h4{
        font-size: 30px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 2.9px;
        color: #fff;
        margin: 85px auto 10px auto;
        text-align: center;
      }
    }
    .mainBox{
      width: 100%;
      margin: 20px auto;
      .imgBox {
        .itemBox {
          width: 702px;
          height: 217px;
          margin: 30px auto;
          border-radius: 5px;
          padding-top: 117px;
          .contentBox {
            display: flex;
            align-items: center;
            justify-content: space-around;
            .icon{
              width: 78px;
            }
            .name {
              font-family: FZLTHK--GBK1-0;
              font-size: 33.3px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 37.5px;
              letter-spacing: 3.3px;
              color: #fefbfb;
            }
            .englishName {
              font-family: ArialMT;
              font-size: 25px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 5px;
              color: #fefefe;
              opacity: 0.7;
            }
            .arrow {
              width: 22px;
              height: 37px;
            }
          }
        }
      }
    }
  }
</style>
